<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% comment %}
Copyright 2012, Le Tuan Anh (tuananh.ke@gmail.com)
This file is part of VisualKopasu.
VisualKopasu is free software: you can redistribute it and/or modify 
it under the terms of the GNU General Public License as published by 
the Free Software Foundation, either version 3 of the License, or 
(at your option) any later version.
VisualKopasu is distributed in the hope that it will be useful, but 
WITHOUT ANY WARRANTY; without even the implied warranty of 
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License 
along with VisualKopasu. If not, see http://www.gnu.org/licenses/.
{% endcomment %}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>{{ title }}</title>
		<link rel="stylesheet" href="/static/css/redmond/jquery-ui-1.9.0.custom.min.css" />
		<link rel="stylesheet" href="/static/css/visualkopasu.css" />
		<script type="text/javascript" src="/static/js/jquery-1.8.2.min.js"></script>
		<script src="/static/js/jquery-ui-1.9.0.custom.min.js"></script>
		<script type="text/javascript" src="/static/js/raphael-min.js"></script>
		<script type="text/javascript" src="/static/js/testutil.js"></script>
		<script type="text/javascript" src="/static/js/shinchan.js"></script>
		<script type="text/javascript" src="/static/js/visualisation_v2.js"></script>

		<script type="text/javascript">
			{% autoescape off %}
			
			var dmrs1 = new function(){
				{% comment %}
				// Nodes
				//node1 = {"text": "Linux", "from": 0, "to": 5};
				//node2 = {"text": "is", "from": 6, "to": 8};
				{% endcomment %}
				{{sentence_info.node_list}}
	
				{% comment %}
				// Links
				//link1 = { "from": node1, "to": node2 };
				{% endcomment %}
				{{sentence_info.link_list}}
	
				{% comment %}
				// Node array and Link array
				//nodes = [ node1, node2 ];
				//links = [ link1 ];
				{% endcomment %}
				this.nodes = [ {{sentence_info.node_id_list}} ];
				this.links = [ {{sentence_info.link_id_list}} ];
	
				this.sentence_text = '{{sentence_info.sentence_text}}';
			};
			{% endautoescape %}
		</script>
		
		<script type="text/javascript">
		var console;
		var dmrs_canvas1;
		
		$(document).ready(function() {
			// Console init
			console = new Console("console");
	        console.setEnable(false);
	        
	        dmrs_canvas1 = new Canvas("dmrs_canvas1");
	        initialise();
	        
	        // The div for display highlightable sentence text
	        dmrs1_text_holder = new VisualKopasu.SentenceText("dmrs1_text_holder", dmrs1.sentence_text);
	        var visual_dmrs1 = new VisualKopasu.DMRSCanvas(dmrs1, dmrs_canvas1, dmrs1_text_holder);
	        visual_dmrs1.visualise();  
		});
		
		function initialise(){
			$("#btnShowDocument").button().click(function(){
				window.location = "/doc?id={{sentence_info.sentence.documentID}}";			
			});
			$("#btnShowXML").button().click(function(){
				window.open("/original/?doc={{sentence_info.document.name}}&id={{sentence_info.sentence.ident}}&r={{sentence_info.representation.rid}}");			
			});
			$("#representations").change(function(){
				url = "/dmrs/?id={{sentence_info.sentence.ID}}&r=" + $("#representations").val()
				//alert(url)
				window.location = url
			});
			//{{added_to_basket}}
			{% if not added_to_basket %}
			$("#btnFavourite").button({ text: false
			 	, icons: { primary: "ui-icon-star"	}
				}).click(function(){
				window.open("/basket?action=add&id={{sentence_info.sentence.ID}}&r={{sentence_info.representation.ID}}", "visualkopasubasket");	
				});	
			{% else %}
			$("#btnFavourite").button({ text: false
			 	, icons: { primary: "ui-icon-star"	}
			 	, disabled : true
				});
			{% endif%}
			$("#btnShowBasket").button({ text: false
			 	, icons: { primary: "ui-icon-suitcase"	}
				}).click(function(){
				window.open("/basket", "visualkopasubasket");	
				});
			{% if prev_search %}
			 $( "#btnPrev" ).button({ text: false
			 	, icons: { primary: "ui-icon-seek-prev"	}
				}).click(function(){
				window.location = "/dmrs/?search_id={{prev_search}}";	
				});		
			{% else %}
			 $( "#btnPrev" ).button({ text: false
			 	, icons: { primary: "ui-icon-seek-prev"	}
			 	, disabled : true
				});				
			{% endif %}
			
			{% if next_search %}
			 $( "#btnNext" ).button({ text: false
			 	, icons: { primary: "ui-icon-seek-next"	}
				}).click(function(){
				window.location = "/dmrs/?search_id={{next_search}}";	
				});
			{% else %}
			 $( "#btnNext" ).button({ text: false
			 	, icons: { primary: "ui-icon-seek-next"	}
			 	, disabled : true
				});	
			{% endif %}		
		}
		</script>
	</head>

	<body>
		<div id="banner" class="ui-widget-header ui-corner-all">{{header}}</div>
		<div id="toolbar" class="ui-corner-all">
			<input type="button" id="btnShowDocument" name="btnShowDocument" value="Go to document"/>
			<span id="effect" class="toolbar_label">Representations</span>
			<select id="representations" class="ui-widget">
			{% for representation in representations %}
				<!-- HERE: {{representation.ID}}-->
				<!--HERE: {{current_representation_id}}-->
				{% if representation.ID = sentence_info.representation.ID %}
					<option value="{{representation.ID}}" selected="selected" >
				{% else %}
					<option value="{{representation.ID}}">
				{% endif %}
					{% if representation.mode = 'active' %}
						<span style='color: red'>[*]</span>
					{% endif %}
					{{representation.ID}}
				</option>
			{% endfor %}
			</select>
			<span id="effect" class="toolbar_label">Original doc ID: {{sentence_info.sentence.ident}}</span>
			<input type="button" id="btnShowXML" name="btnShowXML" value="Show XML"/>
			<button id="btnFavourite">Favourite</button>
			<button type="button" id="btnShowBasket" name="btnAdvanceSearch">Show clipped DMRS</button>
			
			{% if prev_search or next_search %}
			<span>
				<span id="effect" class="toolbar_label">Search results: </span>
				<button id="btnPrev">Previous Result</button>
				<span id="effect" class="toolbar_label">
					{{search_id}}/{{search_count}}
				</span>
				<button id="btnNext">Next Result</button>
			</span>
			{% endif %}
		</div>
			
		<div id="dmrs_canvas1"></div>
		<div id="dmrs1_text_holder" class="dmrs_sentence_text"></div>
		<!--	
		<div style="height:300px;width:90%;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
			<div id="holder"></div>
		</div>
		-->
	
		<!--<div id="console"></div>-->
		<!--
			<div id="sentence_holder"></div>
			<hr/>
		-->
		
		{% autoescape off %}
		<!--{{debug_info}}-->
		{% endautoescape %}   

	</body>
</html>
